<template>
	<view class="beijingse1">
		<u-popup :show="show" @close="close" mode="center">
			<view class="mainpadding">
				<view class="ersma">
					<image src="../static/logo.png" mode=""></image>
				</view>
			</view>
		</u-popup>
		<u-sticky bgColor="#ffffff">
			<u-tabs :list="tabslist" :scrollable="false" lineColor="#ffdbd7" @change="tabclick"></u-tabs>
		</u-sticky>
		<view class="mainpadding">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 300rpx;"></view>
			</view>
			<view class="mainpadding radius shanbj dingwei" :class="item.status==10?'ffffff':'bghui'"
				v-for="item in list.data" :key="item.id">
				<view class="flexbetween">
					<view class="">
						<view class="ershiba xiaohong textcenter" v-if="Number(item.price)">￥
							<text class="xiaohong sishi fonweight">{{Number(item.price)}}</text>
						</view>
						<view class="xiaohong main_size " :class="Number(item.price)?'margin_top1':''">
							{{item.type==1?"抵扣券":"兑换券"}}
						</view>
					</view>
					<view class="flexbetween" style="width: 72%;">
						<view class="">
							<view class="xiaohei main_size xiankuan">{{item.name}}</view>
							<view class="xiaohui main_size margin_top1">{{item.end_time_text}}</view>
						</view>
						<view class="honbtn" v-if="item.type==1 && item.status==10" @click="shiyong">去使用</view>
						<view class="honbtn" v-if="item.type==2 && item.status==10" @click="showewm(item.no)">出示券码
						</view>
						<view class="huibtn" v-if="item.status==20">已使用</view>
						<view class="huibtn" v-if="item.status==30">已过期</view>
					</view>
				</view>
				<view class="margin_top xiaohei main_size xiankuan" v-if="item.type==2 && item.status==10">
					券码：{{item.no}}</view>
				<view class="zuoyuan"></view>
				<view class="youyuan"></view>
			</view>
		</view>
		<u-modal :show="modalshow" title="出示券码" confirmText="关闭" @confirm="modalshow=false;init();">
			<view class="slot-content ">
				<view class="flexcenter">
					<uqrcode ref="uqrcode" canvas-id="qrcode" v-bind:value="qrcodeurl" :options="{ margin: 10}"
						size="150">
					</uqrcode>
				</view>
				<view class="xiaohui textcenter margin_top">出示券码给店家</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				tabslist: [{
					id: "1",
					name: "抵扣券"
				}, {
					id: "2",
					name: "兑换券"
				}],
				tabsId: 1,
				userInfo: {},
				qrcodeurl: "",
				modalshow: false
			}
		},
		onShow() {
			this.init()
			this.getinit()
		},
		methods: {
			showewm(no) {
				this.qrcodeurl = no
				this.modalshow = true
			},
			tabclick(item) {
				this.tabsId = item.id;
				this.list.data = [];
				this.init()
			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						httpRequest.toast("复制成功")
					}
				});
			},
			getinit() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			shiyong() {
				if (this.userInfo.is_vip) {
					httpRequest.toast("您已是采购员无需重复开通")
					return false
				}
				uni.navigateTo({
					url: "/pages_mine/chengweihy"
				})
			},
			init(isPage, page) { //提现记录
				let _this = this;
				let url = '/api/user/userCouponIndex'
				httpRequest.request(url, 'GET', {
					page: page || 1,
					limit: _this.limit,
					type: this.tabsId
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bghui {
		background-color: rgba(0, 0, 0, .1);
	}

	.ersma {
		width: 360rpx;
		height: 360rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.youyuan {
		width: 36rpx;
		border-radius: 50%;
		background: #F2F2F2;
		height: 36rpx;
		position: absolute;
		right: -18rpx;
		bottom: 42%;
	}

	.zuoyuan {
		width: 36rpx;
		border-radius: 50%;
		background: #F2F2F2;
		height: 36rpx;
		position: absolute;
		left: -18rpx;
		bottom: 42%;
	}

	.honbtn {
		width: 125rpx;
		height: 42rpx;
		background: #C01933;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 300;
		color: #FFFFFF;
	}

	.huibtn {
		width: 125rpx;
		height: 42rpx;
		background: #999;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 300;
		color: #FFFFFF;
	}

	.beijingse1 {
		background: #F2F2F2;
		min-height: calc(100vh - 30rpx);
		height: auto;
	}

	.shanbj {
		margin-top: 30rpx;
	}

	.shanbj:first-child {
		margin-top: 0;
	}
</style>